//用户名
function logoin() {
    let username_x = localStorage.getItem('name_x')
    $('.box1').html(username_x)
}
logoin()



// 渲染页面
class Shopping {
    constructor() {
        this.y = false
    }
    refresh() {
        let userStr = JSON.parse(localStorage.getItem('commoditydata'))
        let str = `<tr>
            <th>全选:&ensp;<input class='o-1' type="checkbox" ${this.y ? 'checked' : ''}></th>
            <th>ID</th>
            <th>商品图片</th>
            <th>商品信息</th>
            <th>单价</th>
            <th>数量</th>
            <th width="100px">总价</th>
            <th>操作</th>
        </tr>`
        let Arr = userStr.map(function (time) {
            let dj = (time.num * time.price).toFixed(2)
            return `  <tr>
            <td>选择:&ensp;<input type="checkbox" name="fuxuan" ${time.select ? 'checked' : ''}></td>
            <td>${time.id}</td>
            <td><img src="${time.img}" alt=""></td>
            <td>${time.name}</td>
            <td>￥${time.price}</td>
            <td><input type="button" name="minus" value="-" ><input type="text" name="amount" value="${time.num}"><input type="button" name="plus" value="+"></td>
                <td class="danjia">￥${dj}</td>
                <td>
                        <a href="#" class="delete">删除</a>
                </td>
            </tr>`
        })
        str += Arr.join('')
        $('table').html(str)
        this.numplus()
        this.minus()
        this.change()
        this.whole()
        this.choice()
        this.totalprice()
        this.delete()
    }
    //数量加
    numplus() {
        let _this = this
        $('input[name="plus"]').click(function () {
            let id_a = $(this).parent().parent().find('td:nth-child(2)').html()
            let userStr = JSON.parse(localStorage.getItem('commoditydata'))
            let plus_i = userStr.find((itme) => {
                return itme.id == id_a
            })
            plus_i.num++
            localStorage.setItem('commoditydata', JSON.stringify(userStr))
            _this.refresh()
        })
    }
    //数量减
    minus() {
        let _this = this
        $('input[name="minus"]').click(function () {
            let id_a = $(this).parent().parent().find('td:nth-child(2)').html()
            let userStr = JSON.parse(localStorage.getItem('commoditydata'))
            let plus_i = userStr.find((itme) => {
                return itme.id == id_a
            })
            if (plus_i.num > 1) {
                plus_i.num--
            } else {
                return
            }
            localStorage.setItem('commoditydata', JSON.stringify(userStr))
            _this.refresh()
        })
    }
    //手动输入数量
    change() {
        let _this = this
        $('input[name="amount"]').blur(function () {
            let number = $(this).val()
            if (number < 1) {
                number = 1
            }
            let id_a = $(this).parent().parent().find('td:nth-child(2)').html()
            let userStr = JSON.parse(localStorage.getItem('commoditydata'))
            let plus_i = userStr.find((itme) => {
                return itme.id == id_a
            })
            plus_i.num = number
            localStorage.setItem('commoditydata', JSON.stringify(userStr))
            _this.refresh()
        })
    }
    //全选
    whole() {
        let _this = this
        $('.o-1').click(function () {
            if ($(this).prop('checked')) {
                _this.y = true
            } else {
                _this.y = false
            }
            let userStr = JSON.parse(localStorage.getItem('commoditydata'))
            userStr.forEach(function (itme) {
                itme.select = _this.y
            });
            localStorage.setItem('commoditydata', JSON.stringify(userStr))
            _this.refresh()
        })
    }
    //单选
    choice() {
        let _this = this
        $('input[name="fuxuan"]').click(function () {
            let id_a = $(this).parent().next().html()
            let userStr = JSON.parse(localStorage.getItem('commoditydata'))
            let choice = userStr.find((itme) => {
                return itme.id == id_a
            })
            choice.select = $(this).prop('checked')
            localStorage.setItem('commoditydata', JSON.stringify(userStr))
            let userStrA = JSON.parse(localStorage.getItem('commoditydata'))
            let quan = userStrA.every((itme) => {
                return itme.select == true
            })
            _this.y = quan
            _this.refresh()

        })
    }
    //总价
    totalprice() {
        let userStrB = JSON.parse(localStorage.getItem('commoditydata'))
        let quan_ = userStrB.filter((itme) => {
            return itme.select == true
        })
        let s = quan_.reduce((i, itme) => {
            let z = (parseInt(itme.num) * itme.price).toFixed(2)
            return i += Number(z)
        }, 0)
        $('.totalprice').html((s).toFixed(2))
    }
    //付款
    pay() {
        $('.jiesuan').click(function () {
            alert(`请付款${$('.totalprice').html()}元`)
        })
    }
    //删除
    delete() {
        let _this = this
        $('.delete').click(function () {
            var ii = confirm('确认删除吗')
            if (ii) {
                let id_a = $(this).parent().parent().find('td:nth-child(2)').html()
                let userStrC = JSON.parse(localStorage.getItem('commoditydata'))
                let index_s = userStrC.findIndex((itme) => {
                    return itme.id == id_a
                })

                userStrC.splice(index_s, 1)
                localStorage.setItem('commoditydata', JSON.stringify(userStrC))
                _this.refresh()
            }
        })
    }

}
$('.box2').click(function(){
    location.href = 'index.html'
})

let shopping = new Shopping()
shopping.refresh()
shopping.pay()